<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Scratch WebGL rendering demo</title>
</head>
<body style="background: lightsteelblue">
<canvas id="debug-canvas" width="10" height="10" style="border:3px dashed red"></canvas>
<canvas id="scratch-stage" width="10" height="10" style="border:3px dashed black"></canvas>
<p>
    <input type="range" id="fudge" style="width:50%" value="90" min="-90" max="270" step="any" oninput="onFudgeChanged(this.value)" onchange="onFudgeChanged(this.value)">
</p>
<p>
    Min: <input id="fudgeMin" type="number" onchange="onFudgeMinChanged(this.value)">
    Max: <input id="fudgeMax" type="number" onchange="onFudgeMaxChanged(this.value)">
</p>
<script src="../render.js"></script>
<script>
    var canvas = document.getElementById('scratch-stage');
    var renderer = new RenderWebGLLocal(canvas);

    var fudgeInput = document.getElementById('fudge');
    function onFudgeMinChanged(newValue) {
        fudgeInput.min = newValue;
    }
    function onFudgeMaxChanged(newValue) {
        fudgeInput.max = newValue;
    }
    function onFudgeChanged(newValue) {
        demoWorker.postMessage({fudge: newValue});
    }

    // Adapted from code by Simon Sarris: http://stackoverflow.com/a/10450761
    function getMousePos(event, element) {
        var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(element, null)['paddingLeft'], 10)     || 0;
        var stylePaddingTop  = parseInt(document.defaultView.getComputedStyle(element, null)['paddingTop'], 10)      || 0;
        var styleBorderLeft  = parseInt(document.defaultView.getComputedStyle(element, null)['borderLeftWidth'], 10) || 0;
        var styleBorderTop   = parseInt(document.defaultView.getComputedStyle(element, null)['borderTopWidth'], 10)  || 0;

        // Some pages have fixed-position bars at the top or left of the page
        // They will mess up mouse coordinates and this fixes that
        var html = document.body.parentNode;
        var htmlTop = html.offsetTop;
        var htmlLeft = html.offsetLeft;

        // Compute the total offset. It's possible to cache this if you want
        var offsetX = 0, offsetY = 0;
        if (element.offsetParent !== undefined) {
            do {
                offsetX += element.offsetLeft;
                offsetY += element.offsetTop;
            } while ((element = element.offsetParent));
        }

        // Add padding and border style widths to offset
        // Also add the <html> offsets in case there's a position:fixed bar
        // This part is not strictly necessary, it depends on your styling
        offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
        offsetY += stylePaddingTop + styleBorderTop + htmlTop;

        // We return a simple javascript object with x and y defined
        return {
            x: event.pageX - offsetX,
            y: event.pageY - offsetY
        };
    }

    canvas.onclick = function(event) {
        var mousePos = getMousePos(event, canvas);
        var pickPromise = renderer.pick(mousePos.x, mousePos.y);
        pickPromise.then(function(pickID) {
            console.log('You clicked on ' + (pickID < 0 ? 'nothing' : 'ID# ' + pickID));
        });
    };

    function drawStep() {
        renderer.draw();
        requestAnimationFrame(drawStep);
    }
    drawStep();

    renderer.setDebugCanvas(document.getElementById('debug-canvas'));

    var demoWorker = new Worker('worker.js');
    renderer.connectWorker(demoWorker);
</script>
</body>
</html>
